window.onload = function () {

	var box = document.querySelector('.product_left_top');
	var son = box.querySelector('.mask');
	var sonBig = box.querySelector('.big');
	box.addEventListener('mouseover', function () {
		son.style.display = 'block';
		sonBig.style.display = 'block';
	})
	box.onmouseout = function () {
		son.style.display = 'none';
		sonBig.style.display = 'none';
	}
	box.addEventListener('mousemove', function (e) {
		var x = e.pageX - this.offsetLeft;
		var y = e.pageY - this.offsetTop;
		var maskx = x - son.offsetWidth / 2;
		var masky = y - son.offsetHeight / 2;
		var maskMaxX = this.offsetWidth - son.offsetWidth;
		var maskMaxY = this.offsetHeight - son.offsetHeight;
		//设置边界处理，防止移出小图片
		if (maskx <= 0) {
			maskx = 0;
		}
		if (maskx >= maskMaxX) {
			maskx = maskMaxX;
		}
		if (masky <= 0) {
			masky = 0;
		}
		if (masky >= maskMaxY) {
			masky = maskMaxY;
		}
		son.style.left = maskx + 'px';
		son.style.top = masky + 'px';


		//3.大图移动
		var bigImg = document.querySelector('.large_img');
		var bigMax = bigImg.offsetWidth - sonBig.offsetWidth;
		var bigX = maskx * bigMax / maskMaxX;
		var bigY = masky * bigMax / maskMaxY;
		bigImg.style.left = -bigX + 'px';
		bigImg.style.top = -bigY + 'px';
	})



	// tab栏切换
	//获取元素
	//01 获取上半部分盒子
	var tab_top = document.querySelector('.specific_right_title');
	//02 获取上班部分 所有小li 得到一个数组
	var lis = tab_top.querySelectorAll('li');
	//03 获取下半部分 所有小div盒子 得到一个数组
	var tabContent = document.querySelectorAll('.tab_content');
	//for 循环所有小li 绑定点击事件
	for (var i = 0; i < lis.length; i++) {
		//开始给上面li设置索引号 属性index 值 i 
		lis[i].setAttribute('index', i);
		// 注册点击事件
		lis[i].onclick = function () {
			// 来个排他思想
			for (var j = 0; j < lis.length; j++) {
				//先让所有的li 点击没有样式
				lis[j].className = '';
			}
			// 谁点击 谁加样式
			this.className = 'on';
			//2 下面显示内容模块也要写在onclick里面 因为一一对应
			// 给上面top 所有li 添加index 索引号 属性从0开始 自定义属性
			var index = this.getAttribute('index');
			for (var k = 0; k < tabContent.length; k++) {
				//所有的小div 隐藏
				tabContent[k].style.display = 'none';
			}
			//点击哪个小li 小li的index对应的div 显示
			tabContent[index].style.display = 'block';
		}
	}

	// 我要提问部分开始
	var questionsBtn = document.querySelector('.questions_btn');
	var questionsClose = document.querySelector('.questions_close');
	var cancel = document.querySelector('.cancel');
	var questions = document.querySelector('.questions');

	questionsBtn.onclick = function () {
		questions.style.display = 'block';
	}
	questionsClose.onclick = function () {
		questions.style.display = 'none';
	}
	cancel.onclick = function () {
		questions.style.display = 'none';
	}
	// 我要提问部分结束


	// 数量增减逻辑
	const numberBtns = document.querySelectorAll('.number_btn');
	const numberText = document.querySelector('.number_text');

	numberBtns.forEach(btn => {
		btn.addEventListener('click', function () {
			let currentValue = parseInt(numberText.value);
			if (this.textContent === '+') {
				currentValue++;
			} else if (this.textContent === '-') {
				if (currentValue > 1) {
					currentValue--;
				}
			}
			numberText.value = currentValue;
		});
	});

	// 获取加入购物车按钮和商品信息
	const addToCartBtn = document.getElementById('addToCartBtn');
	const productName = document.querySelector('.product_right h2').textContent;
	const productPrice = document.querySelector('.price_bd_right span:nth-child(2)').textContent; // 获取价格
	const productImg = document.querySelector('.bigImg').src;
	const shopName = document.querySelector('.shop_title').textContent; // 获取店铺名称

	addToCartBtn.addEventListener('click', function () {
		const productInfo = {
			name: productName,
			price: parseFloat(productPrice), // 确保价格是数字类型
			imgSrc: productImg,
			shopName: shopName,
			quantity: parseInt(numberText.value) || 1 // 获取数量输入框的值，确保是整数
		};

		// 将商品信息存储到localStorage
		let cartItems = JSON.parse(localStorage.getItem('cartItems')) || [];
		cartItems.push(productInfo);
		localStorage.setItem('cartItems', JSON.stringify(cartItems));

		alert('添加成功');
	});
}

// 点小图切大图
function changePic(imgName) {
	var bigImg = document.querySelector('.large_img');
	var bigPic = document.querySelector('.bigImg');
	bigPic.src = "img/detail0" + imgName + ".jpg";
	bigImg.src = "img/detail0" + imgName + ".jpg";
}



